<template>
	<div id="movie">
		<div id="movie-tab">
			<router-link tag="span" to="/movie/City">北京<i class="fa fa-caret-down"></i></router-link>
			<router-link tag="span" to="/movie/Now">正在热映</router-link>
			<router-link tag="span" to="/movie/Coming">即将上映</router-link>
			<router-link tag="span" to="/movie/Search"><i class="fa fa-search"></i></router-link>
		</div>
		<router-view></router-view>
	</div>
</template>

<script>
</script>

<style scoped>
	#movie{
		padding-top:50px;
		padding-bottom:50px;
	}
	#movie-tab span{
		width:25%;
		display:inline-block;
		text-align: center;
	}
	.fa-caret-down{
		margin-left:5px;
	}
	#movie-tab{
		height:40px;
		line-height: 40px;
	}
	#movie-tab span:not(:first-child){
		font-weight:bold;
		color:#666;
	}
	.fa-search{
		color:#FF9900;
		font-size:22px;
	}
	#movie-tab span.router-link-active{
		color:#F03D37;
		border-bottom:2px solid #F03D37;
	}
</style>
